<template>
  <div class="form">
    <el-dialog v-dialogDrag class="transferDialog tiny-mce-dialog" :close-on-press-escape = "true" :show-close = 'true' center :modal="false" title="审批" width="850px" :visible.sync="isShow" @close="cancel" :close-on-click-modal="false">
        <vue-scroll >
          <el-form :model="ruleForm" size="small" label-width="80px">
            <el-card class="box-card">
              <div slot="header">
                <span>类目</span>
              </div>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="出发地" prop="shipAddress" label-width="80px">
                    <el-input class="noBg" placeholder="请选择地址" clearable
                              v-model="ruleForm.shipAddress" maxlength="50" readonly>
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="详细地址" prop="shipDetailAddress" label-width="80px">
                    <el-input  readonly v-model="ruleForm.shipDetailAddress" clearable maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="到达地" prop="receiveAddress" label-width="80px">
                    <el-input class="noBg" placeholder="请选择地址" clearable
                              v-model="ruleForm.receiveAddress" maxlength="50" readonly>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="详细地址" prop="receiveDetailAddress" label-width="80px">
                    <el-input placeholder="" readonly v-model="ruleForm.receiveDetailAddress" clearable maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="货物名称" prop="name" label-width="80px">
                    <el-input v-model="ruleForm.name" readonly clearable maxlength="20"/>
                  </el-form-item>
                </el-col>

                <el-col :span="12" >
                  <el-form-item label="货物数量" prop="weight" label-width="80px">
                    <el-input v-model="ruleForm.weight" readonly clearable />
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="货物类型" prop="freightTransportCode" label-width="80px">
                    <el-select  v-model="ruleForm.freightTransportCode" size="mini" filterable placeholder="请选择货物类型" @change="">
                      <el-option
                          v-for="item in ruleForm.freightTypeCodes"
                          :key="item.idStr"
                          :label="item.cname"
                          :value="item.idStr">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>

            <el-card class="box-card">
              <div slot="header">
                <span>运输公司</span>
              </div>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="是否指定运输公司" prop="radio" label-width="140px">
                    <el-radio-group v-model="ruleForm.isAppoint" >
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="ruleForm.isAppoint === 1 ">
                  <el-form-item label="运输公司" prop="transportAssign" label-width="80px">
                    <el-select v-model="ruleForm.transportAssign" multiple collapse-tags filterable placeholder="请选择" clearable @change="" style="width: 285px;" class="filter-item">
                      <el-option
                          v-for="item in ruleForm.transports"
                          :key="item.userId"
                          :label="item.merchantName"
                          :value="item.userId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
            <el-card class="box-card">
              <div slot="header">
                <span>费用</span>
              </div>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="运输费" prop="freightPrice" label-width="80px">
                    <el-input v-model="ruleForm.freightPrice" readonly clearable placeholder="运输费" >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="装车费" prop="loadFee" label-width="80px">
                    <el-input v-model="ruleForm.loadFee" readonly clearable placeholder="装车费" >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="卸车费" prop="unloadFee" label-width="80px">
                    <el-input v-model="ruleForm.unloadFee" readonly clearable placeholder="卸车费" >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="信息费" prop="infoFee" label-width="80px">
                    <el-input v-model="ruleForm.infoFee" readonly clearable placeholder="信息费" >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="磅费" prop="poundsFee" label-width="80px">
                    <el-input v-model="ruleForm.poundsFee" readonly clearable placeholder="运输费" >
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>

            <el-card class="box-card">
              <div slot="header">
                <span>拉货时间</span>
              </div>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="开始时间" prop="startDate" label-width="80px">
                    <el-date-picker
                        readonly
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="ruleForm.startDate"
                        format="yyyy-MM-dd HH:mm"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结束时间" prop="endDate" label-width="80px">
                    <el-date-picker
                        readonly
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="ruleForm.endDate"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>

            <el-card class="box-card">
              <div slot="header">
                <span>其它</span>
              </div>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="进矿预计排队时间" prop="joinMouthTime" label-width="140px">
                    <el-input v-model="ruleForm.joinMouthTime" readonly clearable placeholder="进矿预计排队时间" >
                      <template slot="append">分钟</template>
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="车辆类型" prop="vehicleTypeId" label-width="80px">
                    <el-select v-model="ruleForm.vehicleTypeId" filterable placeholder="请选择" clearable @change="">
                      <el-option
                          v-for="item in ruleForm.vehicleTypes"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="装车预计排队时间" prop="loadCarTime" label-width="140px">
                    <el-input v-model="ruleForm.loadCarTime" clearable readonly placeholder="装车预计排队时间" >
                      <template slot="append">分钟</template>
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="车辆长度" prop="vehicleLengthId" label-width="80px">
                    <el-select v-model="ruleForm.vehicleLengthId" filterable placeholder="请选择" clearable @change="" >
                      <el-option
                          v-for="item in ruleForm.vehicleLengths"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="最低载重" prop="lowWeight" label-width="140px">
                    <el-input v-model="ruleForm.lowWeight" readonly clearable placeholder="最低载重" >
                      <template slot="append">吨</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="24">
                  <el-form-item label="备注" prop="remark" label-width="140px">
                    <el-input
                        readonly
                        clearable
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="ruleForm.remark"
                        :autosize="{ minRows: 4, maxRows: 8}"
                        maxlength="200"
                        show-word-limit>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
            <el-card class="box-card">
              <div slot="header">
                <span>预约</span>
              </div>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="是否预约上架" prop="isUp" label-width="140px">
                    <el-radio-group v-model="ruleForm.isUp">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="ruleForm.isUp === 1">
                  <el-form-item label="预约上架时间" prop="upTime" label-width="140px">
                    <el-date-picker
                        v-model="ruleForm.upTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="是否预约下架" prop="isDown" label-width="140px">
                    <el-radio-group v-model="ruleForm.isDown">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="ruleForm.isDown === 1">
                  <el-form-item label="预约下架时间" prop="upTime" label-width="140px">
                    <el-date-picker
                        v-model="ruleForm.downTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>

            <el-card class="box-card">
              <div slot="header">
                <span>收货人信息</span>
              </div>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="姓名" prop="receiveName" label-width="140px">
                    <el-input v-model="ruleForm.receiveName" readonly clearable placeholder="收货人姓名" >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" >
                  <el-form-item label="联系电话" prop="receivePhone" label-width="140px">
                    <el-input v-model="ruleForm.receivePhone" readonly clearable placeholder="收货人电话" >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>

          </el-form>
        </vue-scroll>
        <div slot="footer" class="dialog-footer" >
          <el-button type="text" @click="cancel">取 消</el-button>
          <el-button v-loading="fullscreenLoading" v-permission="['admin','transport:approve']" type="success" @click="save(true)">审 批</el-button>
          <el-button v-loading="fullscreenLoading" v-permission="['admin','transport:approve']" type="primary" @click="dialogVisible = true">驳 回</el-button>
        </div>
    </el-dialog>
    <div class="panel">
        <map-select v-if="showOperation" :showOperation.sync="showOperation" :matchData="matchData" :formData="ruleForm" v-on:confirm="getPoints"></map-select>
    </div>
    <el-dialog
        title="审批原因"
        :visible.sync="dialogVisible"
        width="400px"
        :before-close="handleClose">
      <el-form ref="causeValue" :model="causeValue" :rules="rules" size="small" label-width="80px">
        <el-card class="box-card">
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="原因" prop="cause" label-width="50px">
                <el-input
                    clearable
                    type="textarea"
                    placeholder="请输入驳回原因"
                    v-model="causeValue.cause"
                    :autosize="{ minRows: 6, maxRows: 10}"
                    maxlength="200"
                    show-word-limit>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button v-loading="fullscreenLoading" type="success" @click="save(false)">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import MapSelect from '@/components/map/operation.vue'
import DateRangePicker from '@/components/DateRangePicker/index'

export default {
  name: 'CreateStaff',
  props: ['showFormPanel', 'item'],
  data () {
    return {
      dialogVisible: false,
      tt: [],
      matchData:{},
      causeValue:{cause: '信息不符，请填写正确信息'},
      showOperation:false,
      fullscreenLoading: false,
      customVal: {imgName: ''},
      showTreeDialog: false,
      selectOrgExpandAll: false,
      ruleForm: this.item,
      roleOptions: [],
      formLabelWidth: '85px',
      formLabelWidth1: '65px',
      isShow: this.showFormPanel,
      rules: {
        cause: [
          { required: true, message: '请输入驳回原因', trigger: 'blur' }
        ]
      }
    }
  },
  filters: {
    formatStatus: function (val) {
      if (val === 'LOCK') {
        return false
      } else if (val === 'NORMAL') {
        return true
      }
      return '-'
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    save (val) {
      let self = this
      let pram = {
        ids: [self.ruleForm.id],
        falg: val
      }
      if (!val) {
        self.$refs['causeValue'].validate((valid) => {
          if (valid) {
            pram.msg = self.causeValue.cause
          } else {
            return
          }
        })
      }
      this.fullscreenLoading = true
      self.$http.put('/api/transport/approve', pram)
          .then(function (res) {
            self.fullscreenLoading = false
            self.dialogVisible = false
            self.cancel()
            self.$emit('refreshList')
          }).catch(function (error) {
            self.fullscreenLoading = false
            console.log(error)
      })
    },
    cancel (){
      this.isShow = false
      this.$emit('update:showFormPanel', this.isShow)
    }
  },
  mounted: function () {

  },
  components: {
    MapSelect,
    DateRangePicker
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
.mark-body{
  position:fixed;
  left:0px;
  top:0px;
  background:rgba(0, 0, 0, 0.18);
  width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height:100%;
  filter:alpha(opacity=60);  /*设置透明度为60%*/
  opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
  z-Index:999;
}
aside {
  /* background: #eef1f6; */
  /* padding: 6px 5px; */
  background: none;
  padding: 0px 24px;
  margin-bottom: 1px;
  border-radius: 2px;
  display: block;
  /* line-height: 50px; */
  /* font-size: 48px; */
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  color: #2c3e50;
  /* -webkit-font-smoothing: antialiased; */
  -moz-osx-font-smoothing: grayscale;
}
</style>
